<template>
  <view class="favorite_page">
    <Head title="收藏列表" :transparent="false" :showBack="false">
      <!-- <text slot="action">搜索</text> -->
    </Head>
    <scroll-view scroll-x :scroll-left="item.pageX * -1" class="favorite_item" v-for="(item, index) in favoriteList" :key="index" @click="goDetail(item)">
      <view class="favorite_content" direction="horizontal" @touchstart="handleTouchStart(index, $event)"
        @touchmove="handleTouchMove(index, $event)" @touchend="handleTouchEnd(index, $event)">
        <view class="favorite_goods">
          <view class="img">
            <ImageLoad :src="item.mainPic" mode="widthFix"/>
          </view>
          <view class="goods_info">
            <view class="title">{{item.dtitle}}</view>
            <view class="price_box">
              <text class="coupon_price">券后:{{item.actualPrice}}元</text>
              <text class="origin_price">{{item.originalPrice}}</text>
            </view>
          </view>
        </view>
        <view class="favorite_delete" @tap.native.stop="cancel(item, index)">
          <text class="iconfont icon-shanchu"></text>
        </view>
      </view>
    </scroll-view>
    <view class="cu-load bg-grey" v-if="isLoad" :class="finished?'over':'loading'"></view>
    <NoData v-if="!isLoad && favoriteList && favoriteList.length <= 0">
      <view slot="text">您还未收藏任何商品，赶紧去收藏试试</view>
    </NoData>
  </view>
</template>

<script>
  import Head from '@/pages/pagecomponents/head'
  import NoData from '@/pages/pagecomponents/nodata'
  import ImageLoad from '@/pages/pagecomponents/other/imageload'
  export default {
    components: {
      Head,
      NoData,
      ImageLoad,
    },
    data() {
      return {
        startX: 0, // 计算移动距离用
        btnWidthUPX: 160, // 删除按钮宽度
        marginWidthUPX: 40, // item的左右间距之和
        favoriteList: [],
        param: {
          pageNo: 1,
          pageSize: 10,
        },
        isLoad: false,
        finished: false,
      }
    },
    computed:{
      userInfo(){ //用户登录成功跳回页面后，自动刷新收藏列表
        this.getFavoriteList('pullDown');
        return this.$store.state.userInfo
      },
    },
    onShow() {
      this.getFavoriteList();
    },
    methods: {
      cancel(item, index) {
        this.$api.user.favoriteItem({
          goodsId: item.goodsId,
          favorite: false,
        }).then(res => {
          uni.showToast({
            title: '取消收藏成功！'
          });
          this.favoriteList.splice(index, 1)
          // 调用刷新用户信息方法
          this.$store.commit('refreshUserInfo')
        })
      },
      nextPaging() {
        // 下一页
        if (this.finished !== true) {
          this.param.pageNo += 1
          this.getFavoriteList()
        }
      },
      getFavoriteList(type) {
        if (type === 'pullDown') {
          // 下拉刷新
          this.isLoad = true
          this.favoriteList = []
          this.param.pageNo = 1
        }
        this.$api.user.pagingFavorite(this.param).then(res => {
          if (type === 'pullDown') {
            // 下拉刷新
            uni.stopPullDownRefresh();
          }
          this.isLoad = false
          if (res.data.list && res.data.list.length <= 0) {
            this.finished = true;
          }
          res.data.list.forEach(item => {
            item.pageX = 0
          })
          let list = res.data.list
          let favoriteList = this.favoriteList
          favoriteList = favoriteList.concat(list)
          this.favoriteList = favoriteList
        }).catch(err => {
          this.isLoad = false
          this.finished = true;
        })
      },
      handleTouchStart(index, e) {
        this.startX = e.touches[0].pageX
      },
      handleTouchMove(index, e) {
        let moveX = e.touches[0].pageX
        let endX = moveX - this.startX
        this.favoriteList[index].pageX = endX;
      },
      handleTouchEnd(index, e) {
        let btnWidthPX = uni.getSystemInfoSync().screenWidth / 750 * this.btnWidthUPX; // upx转换成px
        let marginWidthPX = uni.getSystemInfoSync().screenWidth / 750 * this.marginWidthUPX; // upx转换成px
        if (this.favoriteList[index].pageX < 0 && this.favoriteList[index].pageX >= btnWidthPX / 2 * -1) {
          let item = this.favoriteList[index];
          item.pageX = 0;
          this.$set(this.favoriteList, index, item)
          // this.favoriteList[index].pageX = 0;
        } else if (this.favoriteList[index].pageX < btnWidthPX / 2 * -1 && this.favoriteList[index].pageX > btnWidthPX *
          -1) {
          this.favoriteList[index].pageX = btnWidthPX * -1 - marginWidthPX;
        }
      },
      goDetail(item) {
        uni.navigateTo({
          url: `/pages/itemdetail/index?id=${item.tId}&&goodsId=${item.goodsId}`
        });
      },
      refresh() {
        // 下拉刷新
        this.getFavoriteList('pullDown')
      },
    }
  }
</script>

<style scoped lang="scss">
  .favorite_page {
    animation: fadein 1s;
    min-height: 100%;
    padding: 80px 0 0;
    // margin-top: var(--status-bar-height);
    .favorite_item {
      margin: 0 20upx;
      width: 710upx;
      height: 160upx;
      box-shadow: 0px 20upx 40upx 0px rgba(0, 0, 0, 0.1);
      border-radius: 10upx;
      overflow: hidden;
      background: #ffffff;
      .favorite_content {
        width: 910upx;
        height: 100%;
        .favorite_goods {
          vertical-align: top;
          display: inline-block;
          width: 750upx;
          height: 100%;
          .img {
            display: inline-block;
            width: 160upx;
            height: 160upx;
            overflow: hidden;
          }
          .goods_info {
            margin-left: 40upx;
            height: 100%;
            vertical-align: top;
            display: inline-block;
            .title {
              margin-top: 20upx;
              width: 450upx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 30upx;
              line-height: 40upx;
            }
            .price_box {
              margin-top: 40upx;
              line-height: 40upx;
              .coupon_price {
                font-size: 30upx;
                color: #2f5085;
              }
              .origin_price {
                margin-left: 10upx;
                color: #959595;
                text-decoration: line-through;
              }
            }
          }
        }
        .favorite_delete {
          display: inline-block;
          text-align: center;
          width: 160upx;
          height: 100%;
          background-color: #f63e3e;
          .iconfont {
            line-height: 160upx;
            color: #ffffff;
            font-size: 45upx;
          }
        }
      }
      +.favorite_item {
        margin-top: 20upx;
      }
    }
  }
</style>
